<template>
	<view class="content" v-if="info.id !== undefined ">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="正在支付" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="baibox">
			<view class="topbox">
				<image :src="info.user.pic | formatImgUrl" class="head" mode=""></image>
				<view class="title">
					{{info.user.username}}
				</view>
				<image
					:src="$options.filters.formatImgUrl(info.user.writer_level.is_active?info.user.writer_level.level.image:info.user.writer_level.level.hide_img)"
					@click="$go('/pages/user/grade?uid='+info.user.membe_id)" class="jipic" mode=""
					v-if="info.user&&info.user.is_writer">
				</image>
								
							
				<!-- <image v-if="info.user&&info.user.user_level.level"
						
						:src="!info.user.user_level.level?'':($options.filters.formatImgUrl(info.user.user_level.is_active?info.user.user_level.level.image:info.user.user_level.level.hide_img))"
						class="biepic" mode="" >
						
					</image> -->
					
				<view @click="toImRoom()" class="gt">
					去沟通
				</view>
			</view>
			<view class="cbox">
				<image v-if="info.class_type" :src="info.class_type.icon | formatImgUrl" class="cpic" mode=""></image>
				<view class="ctitle">
					{{info.title}}
				</view>
				<view class="cqie" @click="show = true">
					切换
				</view>
			</view>
			<view class="dtxt">
				{{info.type_name}}<text>| {{info.start_shooting}}单起拍</text>
			</view>
			<view class="jiatxt">
				{{Number(info.price).toFixed(0)}}
				<text>币/{{info.word_count}}</text>
			</view>
			<!-- <view class="numbox">
				<view class="numtxt">
					制作天数
				</view>
				<u-number-box integer bgColor="rgba(153, 153, 153, 0.1);" v-model="form.day" @change="valChange"
					:min="1" :max="100" integer>></u-number-box>
			</view> -->
			
			<view class="numbox"  @click="showTime=true">
				<view class="numtxt">
					截稿时间
				</view>
				<view class="numtxt">
					
					<block v-if="selected">
						{{years.length ? (years[times[0]] + '年' + month[times[1]] + '月' + date[times[2]] + '日 ' + hour[times[3]] + ':' + minute[times[4]]) : ''}}
					</block>
					<block v-else>
						请选择 
					</block>
					<!-- {{form.end_time_param?form.end_time_param.substring(0,17) : "请选择"}} -->
					
				</view>
				<!-- <image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image> -->
			</view>
			<view class="numbox">
				<view class="numtxt">
					下单数量
				</view>
				<u-number-box integer bgColor="rgba(153, 153, 153, 0.1);" v-model="form.num" @change="twoChange"
					:min="info.start_shooting?info.start_shooting:1" :max="9999" integer></u-number-box>
			</view>
			<view class="numbox">
				<view class="numtxt">
					优惠券
				</view>
				<view class="numtxt" @click="quan = true" v-if="!selCoupItem.id">
					点击选择
				</view>
				<view class="numtxt" @click="quan = true" v-else>
					{{selCoupItem.coupon.title}}
					<text>-{{selCoupItem.coupon.price}}</text>
				</view>
			</view>
			<view class="hetxt">
				<text>实付款：</text>{{Number(form.amount).toFixed(0)}}<text style="color: #3d3d3d;">币</text>
			</view>
		</view>
		<view class="beibox">
			<view class="beitxt">
				稿件要求
			</view>
			<!-- <input type="text" class="beiput" placeholder="请输入稿件要求" v-model="form.notes" maxlength="-1"> -->
			<view class="beiput" @tap.stop="showSuggest=true">
				{{form.notes ? '点击查看稿件要求' : '请输入稿件要求'}}
			</view>
		</view>
		<view class="xubox">
			<view class="xutxt">
				交易须知:<br>
				1、未满18周岁的用户，请务必在监护人明示同意的前提下，进行相关交易。成功付款后，订单金额将由平台保管，订单完成后到账写手账户。<br>
				2、下单后请沟通确认约稿内容、截稿时间、版权归属等细节。<br>
				3、如订单发生争议，可与写手沟通，积极解决问题。如沟通未果可到【我的】-【订单查询】选择该订单，选择【申请退款】或在【更多操作】进行订单申诉。<br>
				4、为保护自身权益，请勿脱离平台交易，此种情况下，双方权益均无法得到平台保障。同时一经发现，将永久封禁双方账号。<br>
				5、如写手引导脱离平台交易，或发现其他不合理、违法违规行为，请向平台申诉。<br>
				6、平台禁止购买、出售、代写学位论文或组织学位论文买卖等学术造假行为，一经确认，交易双方将可能承担相应责任。<br>
				7、请阅读并同意<text @click.stop="goToxie">《平台约文服务协议及指南》</text>。
			</view>
		</view>
		<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="zaibox">
				<view class="zaileft">
					<view class="dbox">
						<view class="zaititle">
							正在下单
						</view>
						<view class="text">
							请确认您的输入无误
						</view>
					</view>
					<view class="zaitxt">
						写手接单前，您的订单可以随时取消
					</view>
				</view>
				<view class="que" @click="showPay()">
					立即下单
				</view>
				
			</view>
			<view class="xiebox" @click="isRead =( isRead == 2?0:2)" :class="isRead == 1 ? 'shake-horizontal' : ''">
				<label>
					<!-- <checkbox style="transform: scale(0.7);" :checked="isRead" /> -->
					<u-checkbox shape="circle" size="14" :checked="isRead" activeColor="#45C4B0" inactiveColor="#999" @change="changeBox"></u-checkbox>
				</label>
				<view class="xietxt">
					我已阅读并同意：<text @click.stop="goToxie">《平台约文服务协议及指南》</text>
				</view>
			</view>
		</view>

		<!-- 切换弹框 -->
		<u-popup :show="show" @close="close" @open="open">
			<view class="mask">
				<view class="matop">
					<view class="matxt" @click="show = false">
						取消
					</view>
					<view class="matitle">
						切换
					</view>
					<view class="mctxt" @click="close">
						确定
					</view>
				</view>
				<scroll-view scroll-y="true" class="cabox" @scrolltolower="scrolltolower">
					<view class="cali" v-for="(item , index) in goodList" :class="{'active': index == navIndex}"
						@click="navTap(index)">
						<image :src="'/images/jk.png' | formatImgUrl" v-if="index == navIndex" class="san" mode="">
						</image>
						<image :src="'/images/jl.png' | formatImgUrl" v-if="index == navIndex" class="dui" mode="">
						</image>
						<view class="catop">
							<image v-if="item.class_type" :src="item.class_type.icon | formatImgUrl" class="cpic" mode=""></image>
							<view class="catitle">
								{{item.title}}
							</view>
						</view>
						<view class="zhitxt">
							{{item.class_type.title}}<text>| {{item.start_shooting}}单起拍</text>
						</view>
						<view class="jiage">
							{{item.price}}
							<text>币/{{item.word_count}}</text>
						</view>
					</view>
					
					<view class="empytView" v-if="goodList.length<=0">
						<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 优惠券弹框 -->
		<u-popup :show="quan" @close="hidequan">
			<view class="mask">
				<view class="matop">
					<view class="matxt" @click="quan = false">
						取消
					</view>
					<view class="matitle">
						优惠券
					</view>
					<view class="mctxt" @click="hidequan">
						确定
					</view>
				</view>
				<scroll-view class="toubox" scroll-y="true">
					<view class="empytView" v-if="!couponList.length">
						<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
						<!-- <view>- 空列表 -</view> -->
					</view>
					<view class="youbg" v-for="item in couponList" @click="selCoupon(item)">
						<image :src="'/images/youbg.png' | formatImgUrl" class="youpic" mode=""></image>
						<view class="wenben">
							<view class="youleft">
								<view class="yltop">
									<view class="yline"></view>
									<view class="yltitle">
										{{item.coupon.title}}券
									</view>
								</view>
								<view class="mantxt">
									{{item.coupon.price}}币<text>约稿红包</text>
								</view>
								<view class="shaotxt oneline">
									{{item.coupon.des}}
								</view>
							</view>
							<view class="youtxt">
								去使用
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 支付弹框 -->
		<u-popup :show="zhifu" @close="hidezhifu">
			<view class="fubox">
				<view class="futitle">
					粮币不足，请充值后完成支付
				</view>
				<view class="futitle">
					当前粮币余额 {{Number(userInfo.wallet)}} 枚<block v-if="!zhiput">，支付仍需 {{Number(form.price) - Number(userInfo.wallet)}} 枚</block>
				</view>
				<view class="jinbox" style="margin-bottom: 15px;">
					<view class="jinli" v-for="(item , aa) in zhiList" :key="aa" :class="{'jactive': aa == zhiLiang}"
						@click="zhiTab(aa)">
						<image :src="'/images/jk.png' | formatImgUrl" v-if="aa == zhiLiang" class="jiao" mode="">
						</image>
						<image :src="'/images/jl.png' | formatImgUrl" v-if="aa == zhiLiang" class="duih" mode="">
						</image>
						<view class="jintop">
							<view class="jintxt">
								{{ item.money == '任意数量' ? item.money  : Number(item.money).toFixed(0)}}
							</view>
							<image :src="'/images/jn.png' | formatImgUrl" class="jinpic" mode=""></image>
						</view>
						<view class="yuan">
							{{item.price}}元
						</view>
					</view>
				</view>
				
				<view class="pay-item display-flex" @tap="changeType(item.value)" v-for="(item, index) in items" :key="item.value">
					<image :src="item.pic" mode="aspectFit" class="icon"></image>
					<text>{{item.name}}</text>
					<image :src="'/images/xuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-if="form.pay_type == item.value"></image>
					<image :src="'/images/weixuanzhong.png' | formatImgUrl" mode="aspectFit" class="sel" v-else></image>
				</view>
				<view class="shubox" v-if="zhiput">
					<view class="shutitle">
						充值金额
					</view>
					<input type="number" class="shuput" placeholder="最低充值1" maxlength="10" v-model="form.price">
					<view class="shutitle">
						元
					</view>
				</view>
				<view class="lizhi">
					<view class="quezhi" @click="goPay">
						充值并支付
					</view>
				</view>
				<view class="xietxt" style="padding-bottom: 10px;">
					我已阅读并同意：<text @click.stop="goToOtherxie(6)">《平台充值服务协议》</text>
				</view>
			</view>
		</u-popup>

		<!-- 粮币充值 -->
		<u-popup :show="bishow" @close="hidebi">
			<view class="fubox">
				<view class="bititle">
					粮币充值
				</view>
				<view class="jinbox">
					<view class="jinli" v-for="(item , aa) in zhiList" :key="aa" :class="{'jactive': aa == zhiLiang}"
						@click="zhiTab(aa)">
						<image :src="'/images/jk.png' | formatImgUrl" v-if="aa == zhiLiang" class="jiao" mode="">
						</image>
						<image :src="'/images/jl.png' | formatImgUrl" v-if="aa == zhiLiang" class="duih" mode="">
						</image>
						<view class="jintop">
							<view class="jintxt">
								{{ item.money == '任意数量' ? item.money  : Number(item.money).toFixed(0)}}
							</view>
							<image :src="'/images/jn.png' | formatImgUrl" class="jinpic" mode=""></image>
						</view>
						<view class="yuan">
							{{item.price}}元
						</view>
					</view>
				</view>
				<view class="shubox" v-if="zhiput">
					<view class="shutitle">
						充值金额
					</view>
					<input type="number" class="shuput" placeholder="最低充值1" maxlength="10" v-model="form.price">
					<view class="shutitle">
						元
					</view>
				</view>
				<view class="lizhi">
					<view class="quezhi" @click="goPay">
						充值支付
					</view>
				</view>
			</view>
		</u-popup>

		<uni-popup ref="popup1" maskClick type="bottom">
			<view class="clone_date">
			    <gc-date-picker @change="change1" :dateVal="defaultDate" nowStatus="future" :showSecond="false"></gc-date-picker>
			</view>
		</uni-popup>
		
		<!-- 稿件要求弹窗 -->
		<u-popup :show="showSuggest" mode="center" @close="showSuggest=false">
			<view class="mask2">
				<view class="jatitle" >
					稿件要求
				</view>
				<!-- <input maxlength="-1" type="text" class="japut" placeholder="请输入稿件要求"
					v-model="form.notes"> -->
					
				<textarea class="japut" placeholder="请输入稿件要求"
					v-model="form.notes" auto-height></textarea>
		
				<view class="qubox">
					<view class="quli" @click="showSuggest = false">
						取消
					</view>
					<view class="que" @click="showSuggest = false">
						确定
					</view>
				</view>
		
			</view>
		</u-popup>
		
		<!-- 截稿时间 -->
		<u-popup :show="showTime" mode="bottom" @close="showTime=false,isClick = true">
			<view class="custom-bot">
				<view class="title">
					截稿时间
				</view>
				<picker-view :value="times" @change="changeTime" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in month" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in date" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in hour" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in minute" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		
				<view class="marginBorder"></view>
				<view class="btn" @tap="selected=true,selectTime()">
					确认选择
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	import gcDatePicker from '@/components/gc-date-picker/gc-date-picker.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				orderId: null,
				allPriceInfo: [{
					"_id": '1001',   //这个商品的id 一定要跟在app store connect配置的ID相同
					"goods_name": "商品2",
					"price": "12",
				},
				{
					"_id": '1002',
					"goods_name": "商品2",
					"price": "12",
				},
				],
				iapChannel: null,
				productId: '11', //默认苹果内购商品id 要提前在app store connect 配置 要支付的商品的标识（必须是调用uni.requestPayment返回的有效的商品标识）
				productIds:[11],
	
				loading: true,
				userInfo: this.$db.get('userInfo'),
				isRead: false,
				form: {
					order_type: 1,
					gid: '',
					day: 1,
					num: 1,
					pay_type: 4,
					notes: '',
					price: 0,
					app_type:0,
					end_time: '',
					end_time_param: ''
				},
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				// 切换弹框
				show: false,
				navList: [],
				navIndex: 0,
				// 优惠券弹框
				quan: false,
				// 支付弹框 
				zhifu: false,
				items: [{
						value: '4',
						pic: this.$options.filters.formatImgUrl('/images/zfb.png'),
						name: '支付宝充值',
					},
					{
						value: '3',
						pic: this.$options.filters.formatImgUrl('/images/wei.png'),
						name: '微信充值',
					},
					// {
					// 	value: '2',
					// 	pic: this.$options.filters.formatImgUrl('/images/jn.png'),
					// 	name: '粮币支付'
					// }
				],
				current: 0,
				// 粮币充值
				bishow: false,
				zhiList: [],
				zhiLiang: 0,
				zhiput: false,
				id: 0,
				info: {},
				list: {},
				page: 1,
				goodList: [],
				orderInfo: {},
				isClick:false,
				couponList:[],
				selCoupItem:{},
				defaultDate: '',
				showSuggest: false,
				
				month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
				date: [],
				showTime: false,
				years: [],
				times: [0,new Date().getMonth(),new Date().getDate()-1,0,0],
				hour: [],
				minute: [],
				isClick: true,
				selected: false
			}
		},
		components: {
			'gc-date-picker': gcDatePicker,
			uniPopup
		},
		watch: {
			'bishow': function(val) {
				
				// this.form.order_type == val ? 2 : 1
				// this.form.pay_type = val ? 1 : 2
			},
			'form.num': function(val) {
				this.form.price = parseFloat(parseFloat(this.info.price) * parseInt(this.form.num)).toFixed(2)
				
				this.form.amount = parseFloat(parseFloat(this.info.price) * parseInt(this.form.num)).toFixed(2)
			}
		},
		onShow() {
			this.getUserInfo()
			this.getChongList()
			this.getCouponList()
		},
		onLoad(e) {

				// #ifdef APP-PLUS
				//items
					if(uni.getSystemInfoSync().platform === 'ios'){
						this.items = [{
								value: '5',
								pic: this.$options.filters.formatImgUrl('/images/zfb.png'),
								name: 'Apple ID 充值',
							}
						]
						
						plus.payment.getChannels((channels) => {
							console.log("获取到channel" + JSON.stringify(channels))
							this.iapChannel = channels.find(i => i.id === 'appleiap')
						
							if (this.iapChannel) {
								this.requestOrder();
							}
							if (!this.iapChannel) {
								console.log(error,999996)
							}
						}, (error) => {
							console.log(error,999997)
						});
					}
				// #endif
			

		
			if (e.id) {
				this.id = e.id
				this.getInfo()
			} else {
				this.$common.errorToShow('参数异常')
			}
			
			// this.form.end_time_param = this.formateTime()
			
			let years = []
			for (let i = 2023; i <= 2123; i++) {
				years.push(i)
			}
			this.years = years
			
			let date = []
			let days = this.getDays(2023,new Date().getMonth())
			for (let i = 1; i <= days; i++) {
				let num = i > 9 ? i : '0' + i
				date.push(num)
			}
			this.date = date
			
			let hour = []
			for (let i = 0; i <= 59; i++) {
				let num = i > 9 ? i : '0' + i
				hour.push(num)
			}
			this.hour = hour
			this.minute = hour
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route
		},
		methods: {
			requestOrder() {
				uni.showLoading({
					title: '检测支付环境...'
				})
				iapChannel.requestOrder(this.productIds, (orderList) => { //必须调用此方法才能进行 iap 支付
					console.log('requestOrder success666: ' + JSON.stringify(orderList));
					uni.hideLoading();
				}, (e) => {
					console.log('requestOrder failed: ' + JSON.stringify(e));
					uni.hideLoading();
					this.errorMsg()
				});
			},
			subPaynow(e) {
				let _this = this
				uni.showLoading({
					title: '支付中...'
				})
				this.productId = 11
				uni.requestPayment({
					provider: 'appleiap',
					orderInfo: {
						productid: this.productId,  //必填
						quantity: 1,  //选择的数量  可不填
						username: 'dream约文'   //支付商户的名称 可不填
					},
					success: (e) => {
						console.log('支付成功====', e)
					// 支付成功去验单
						uni.hideLoading()
					},
					fail: (e) => {
						uni.hideLoading()
						console.log('支付失败,原因为===', e.errMsg)
					},
					complete: () => {
						uni.hideLoading()
						console.log("payment结束")
					},
				})
			},
			changeType(num){
				this.form.pay_type = num
			},
			scrolltolower(){
				this.page++
				this.getList()
			},
			// 选择时间
			selectTime(){
				this.isClick = true
				let current = this.years[this.times[0]] + '/' + this.month[this.times[1]] + '/' + this.date[this.times[2]] + ' ' + this.hour[this.times[3]] + ':' + this.minute[this.times[4]]
				
				if(new Date().getTime() > new Date(current).getTime()){
					this.$common.errorToShow('截稿时间不能选择晚于当前时间')
					return
				}
				this.showTime=false
			},
			changeBox(e){
				this.isRead = e ? 2 : 0
			},
			getDays(year, month) {
			   let days = [31,28,31,30,31,30,31,31,30,31,30,31] 
			  if ( (year % 4 ===0) && (year % 100 !==0 || year % 400 ===0) ) {
			        days[1] = 29
			  }
			　　return days[month]  
			},
			changeTime(e){
				if(this.times[1] != e.detail.value[1]){
					let date = []
					let days = this.getDays(this.years[e.detail.value[0]],this.month[e.detail.value[1]-1])
					for (let i = 1; i <= days; i++) {
						date.push(i)
					}
					this.date = date
				}
				
				this.times = e.detail.value
				this.form.end_time = this.years[this.times[0]] + '/' + this.month[this.times[1]] + '/' + this.date[this.times[2]] + ' ' + this.hour[this.times[3]] + ':' + this.minute[this.times[4]] + ':00'
			},
			// 格式化日期显示
			formateTime: function(val) {
				var date = new Date()
				if (!!val) {
					date = new Date(val.replace(/^\s+|\s+$/g, ''))
				}
				var year = date.getFullYear()
				var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
				var day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
				var h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
				var m = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
				
				return year + '年' + month + '月' + day + '日 ' + h + ':' + m
			},
			toImRoom() {
				//this.$db.get('userInfo')
				// 下单时返回的uid为写手id 
			// 	console.log(133333333333)
			// 	if (this.$db.get('userInfo').membe_id == this.info.uid) {
			// 		console.log(111111111111111)
			// 		this.$store.commit('createConversationActive', this.$db.get('userInfo').membe_id)
			
			// 		var url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.info.uid
			// 	} else {
			// 		console.log(22222222222)
			// 		this.$store.commit('createConversationActive', this.info.uid)
			// 		var url = '/pages/tim/room?userType=1&showbox=1&uid=' + this.$db.get('userInfo').membe_id
			
			// 	}
			
			// 	// this.$store.commit('createConversationActive', this.userInfo.membe_id)
			// 	// var url = ''
			
			// 	uni.navigateTo({
			// 		url: url
			// 	})
				
				if(!this.isClick){
					
					return
				}
				this.isClick = false
				let membe_id =  this.info.user.is_writer == 1 ?  this.info.uid : this.info.user.membe_id
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+membe_id);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    },
				})
					
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
			},
			change1: function(e) {
				// console.log('日期选择结果', e)
				
				this.form.end_time = e
				let dateArr = e.split('/')
				let date = dateArr[2]
				let day = date.split(' ')
				
				this.form.end_time_param = dateArr[0] + '年' + dateArr[1] + '月' + day[0] + '日 ' + day[1];
			},
			openrili(){
				this.$refs.popup1.open();
				// this.$refs.calendar.open();
			},
			selCoupon(item){
				
				this.quan = false
				if(parseFloat(this.form.price) >= parseFloat(item.coupon.man_price)){
					this.selCoupItem = item
					this.form.cv_id = item.id
					this.form.price = (this.form.num * this.info.price) - item.coupon.price
				}else{
					this.$common.errorToShow('未满足使用条件')
				}
			},
			getCouponList(){
				this.$api.default.request('user/getCouponList',{type:1}).then((res) => {
					if (res.code) {
						this.couponList = res.data
					}
				})
			},
			goToxie(){
				uni.navigateTo({
					url:'/pages/user/abount_dea?id=3'
				})
			},
			goToxiea(){
				uni.navigateTo({
					url:'/pages/webview/webview?url=' +this.$config.default.Url + '/agreement/1000002'
				})
			},
			getChongList() {
				
				if(uni.getSystemInfoSync().platform === 'android'){
					this.$api.default.request('user/exchangeList', {
						type: 1
					}).then((res) => {
						if (res.code) {
							this.zhiList = res.data
							this.zhiList.push({
								id: 666,
								money: '任意数量',
								price: '自定义金额'
							})
						}
					})
					
				}else{
					this.$api.default.request('user/exchangeList_ios', {
						type: 1
					}).then((res) => {
						if (res.code) {
							this.zhiList = res.data
							console.log(this.zhiList,97979797)
							// this.zhiList.push({
							// 	id: 666,
							// 	money: '任意数量',
							// 	price: '自定义金额'
							// })
						}
					})
				}
				
				
			},
			getUserInfo() {
				this.$api.default.request('user/userInfo', {}, 'POST', false).then((res) => {
					if (res.code) {
						this.userInfo = res.user
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			goPay() {
				
				
				let auth = db.get('auth');
				console.log(this.form.order_type,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				if (this.loading) {
					this.$common.errorToShow('数据加载中，请稍后再试')
					return
				}
				var prams = {}
				// order_type订单类型 1购买商品 2 余额充值（粮币）
				if (this.form.order_type == 2) {
					prams['order_type'] = this.form.order_type
					prams['pay_type'] = this.form.pay_type
					prams['fid'] = this.zhiList[this.zhiLiang].id
					prams['price'] = this.form.price
				} else {
					prams = this.form
				}
				console.log(prams,156);
				
				var that = this
				//还得有判断是app微信付钱 还是小程序微信付钱
				// #ifdef APP
					prams.app_type = 2;
				// #endif
				
				// #ifdef MP
					uni.requestSubscribeMessage({
					            //此处填写刚才申请模板的模板ID
						tmplIds: ['3ch9ktRioJ9E4PCOvPqqs0MJuMIkB-X4jkw6meaeNLI'],
						success (res) {
							that.addOrder(prams)
						},fail(err){
							
							that.addOrder(prams)
						}
					})
				// #endif
				
				// #ifndef MP
					that.addOrder(prams)
				// #endif
					
				
			
			},
			addOrder(prams){
				let that = this;
				if(this.form.end_time == ''){
					this.$common.errorToShow('请选择截稿时间');
					return;
				}
				
				if(that.form.pay_type == 5){
					//ios支付
					
					this.subPaynow();
					console.log("ios支付",66)
					return;
					
				}
			console.log("ios支付",that.form.pay_type)
				
				that.$api.default.request('order/createOrder', prams).then((res) => {
					console.log(JSON.stringify(res.data),prams);
					if (res.code) {
						
						that.orderInfo = res.data
					if (that.form.pay_type == 4) {
						console.log(res,777);
						uni.requestPayment({
						    provider: 'alipay',
						    orderInfo: res.data.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						    success: function (res) {
								
								
						        if(that.form.order_type == 2){
						        		that.getUserInfo()
						        		that.getInfo() 
						        		console.log(1118);
						        		that.$common.errorToShow('支付成功');
						        		that.hidezhifu();
						        		that.hidebi();
						        }else{
						    
						        		// that.goTohave()
						        		that.getInfo() 
						        		console.log(1116);
						        		that.$common.errorToShow('支付成功');
						        		setTimeout(function(){
						        			that.goTohave()
						        		}, 800); 
						       
						        }
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						    }
						});
						
						
					}else if (that.form.pay_type == 2) {
							
							if(that.form.order_type == 2){
								that.$common.successToShow(res.msg, () => {
									// that.goTohave()
									that.getUserInfo()
									that.getInfo() 
									console.log(1118);
									that.$common.errorToShow('支付成功');
									that.hidezhifu();
									that.hidebi();
								})
								
							}else{
								that.$common.successToShow(res.msg, () => {
									// that.goTohave()
									that.getInfo() 
									console.log(1116);
									that.$common.errorToShow('支付成功');
									setTimeout(function(){
										that.goTohave()
									}, 800); 
								})
							}
							
						} else {
							console.log(res.data,979797)
							
							uni.requestPayment({
							    provider: 'wxpay',
							    orderInfo: res.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							    success: function (res) {
							        if(that.form.order_type == 2){
							        	that.getUserInfo()
							        	that.getInfo() 
							        	// that.goTohave()
							        	console.log(1118);
							        	that.$common.errorToShow('支付成功');
							        	that.hidezhifu();
							        	that.hidebi();
							        }else{
							        	that.getUserInfo()
							        	that.getInfo() 
							        	// that.goTohave()
							        	console.log(1117);
							        	that.$common.errorToShow('支付成功');
							        	setTimeout(function(){
							        		that.goTohave()
							        	}, 800); 
							        }
							    },
							    fail: function (err) {
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
							
						}
					}
				})
			},
			showPay() {
				
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				if (!this.isRead) {
					this.isReadTip()
				} else {
					console.log(this.userInfo.wallet);
					console.log(this.form.price);
					console.log(this.form.pay_type);
					if(Number(this.userInfo.wallet) > Number(this.form.price)){
						this.form.order_type = 1
						this.form.pay_type = 2
						this.isClick = false
						this.goPay()
						return
					}
					
					if(this.zhiList.length && Number(this.userInfo.wallet) < Number(this.form.price)){
						
						//ios
						if(uni.getSystemInfoSync().platform === 'android'){
							this.zhiLiang = this.zhiList.length - 1
							this.zhiList[this.zhiLiang].money = Number(this.form.price) - Number(this.userInfo.wallet)
						}
					}
					this.form.order_type = 2
					this.zhifu = true
				}
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意下单协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
			getInfo() {
				//
				
				this.$api.default.request('good/info', {
					id: this.id
				}).then((res) => {
					if (res.code) {
						this.info = res.data
						this.info.start_shooting = res.data.start_shooting ? res.data.start_shooting : 1
						this.form.gid = res.data.id
						this.form.amount = this.info.start_shooting * this.info.price
						
						this.getList()
					}
				})
			},
			getList() {
				this.$api.default.request('good/new_list', {
					uid: this.info.uid,
					page: this.page
				}).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.goodList.push(item)
							})
						} else {
							this.goodList = res.data.data
						}

						this.goodList.forEach((item, index) => {
							if (item.id == this.info.id) {
								this.navIndex = index
								this.form.gid = item.id
								this.form.num = item.start_shooting ? item.start_shooting : 1
								this.form.price = parseFloat(parseFloat(item.price) * parseInt(item
									.start_shooting ? item.start_shooting : 1)).toFixed(2)
							}
						})

						this.loading = false
					}
				})
			},

			// 步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			twoChange(e) {
				console.log('当前值为: ' + e.value)
				this.form.price = parseFloat(parseFloat(this.info.price) * parseInt(this.form.num)).toFixed(2)
			},
			// 切换弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			navTap(index) {
				this.navIndex = index
				this.info = this.goodList[index]
				this.form.gid = this.info.id
				this.form.num = this.info.start_shooting
				this.form.price = parseFloat(parseFloat(this.info.price) * parseInt(this.form.num)).toFixed(2)
			},
			// 优惠券弹框
			hidequan() {
				this.quan = false
			},
			// 支付弹框
			radioChange: function(evt) {
				this.isClick=true
				
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				
				
				this.form.pay_type = this.items[this.current].value
				console.log("选择后",this.form.pay_type,777777)
				
			},
			hidezhifu() {
				this.zhifu = false
			},
			zhishow() {
				if (!this.isClick) {
					return; // 如果已经禁止点击，则直接返回
				}
			
				this.isClick = true
				console.log(this.userInfo.wallet);
				console.log(this.form.price);
				console.log(this.form.pay_type);
				let a = this.userInfo.wallet;
				let b = this.form.price;
				this.zhifu = false
				
			
				if (this.form.pay_type == 1 || this.form.pay_type == 3) {
					this.isClick = false
					this.goPay()
				} else {
					if (parseFloat(a) >= parseFloat(b)) {
						
						console.log(111)
						this.isClick = false
						this.goPay()
					} else {
				
						this.isClick = false
						this.form.price = this.zhiList[0].price
						this.bishow = true
						this.form.order_type = 2;
						this.form.pay_type = 4
						
							console.log(this.form,222)
					}
				}

			},
			// 粮币充值
			hidebi() {
				this.bishow = false
				this.form.order_type = 1;
			},
			zhiTab(aa) {
				this.zhiLiang = aa
				if (aa === this.zhiList.length - 1 && uni.getSystemInfoSync().platform === 'android') {
					
					this.zhiput = true
					this.form.price = ''
				} else {
					this.zhiput = false
					this.form.price = this.zhiList[aa].price
				}

			},
			// 下一步
			goTohave() {
				this.bishow = false
				this.form.order_type = 1;
				uni.navigateTo({
					url: '/pages/user/orderdetail?id=' + this.orderInfo.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.custom-bot {
		text-align: center;
		background-color: #fff;
		
		.title{
			padding: 20px 0;
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
	
		.picker-view {
			width: 750rpx;
			height: 200rpx;
		}
	
		.item {
			height: 34px;
			line-height: 34px;
			font-family: '思源黑体';
			font-size: 15px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.marginBorder{
			width: 100%;
			height: 10px;
			background: #F2F5F2;
		}
		
		.btn{
			margin: 10px auto;
			width: 315px;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			background: #45C4B0;
			font-family: '思源黑体';
			font-size: 16px;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		padding: 20rpx 30rpx 250rpx;

		.baibox {
			padding: 20rpx 30rpx 40rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			border-radius: 16px;

			.topbox {
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				padding-bottom: 12rpx;

				.head {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}

				.title {
					padding: 0 8rpx 0 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.jipic {
					width: 41px;
					height:19px;
				}

				.biepic {
					width: 41px;
					height:19px;
					margin-left: 4px;
				}
				
				.gt {
					background: rgba(#45C4B0, .15);
					color: #45C4B0;
					float: right;
					font-size: 26rpx;
					position: absolute;
					right: 65rpx;
					padding: 1px 8px;
					border-radius: 4px;
				}
			}

			.cbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 18rpx 8rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.cpic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}

				.ctitle {
					flex-grow: 1;
					padding: 0 8rpx;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					width: 70%;
				}

				.cqie {
					width: 108rpx;
					height: 40rpx;
					border-radius: 4px;
					text-align: center;
					line-height: 40rpx;
					background: rgba(153, 153, 153, 0.1);
					font-size: 20rpx;
					letter-spacing: 0.08em;
					color: #999999;
				}
			}

			.dtxt {
				padding-bottom: 5rpx;
				font-size: 20rpx;
				color: #3D3D3D;

				text {
					padding-left: 8rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}

			.jiatxt {
				font-size: 36rpx;
				font-weight: bold;
				color: #3D3D3D;
				padding-bottom: 34rpx;

				text {
					padding-left: 5rpx;
					font-size: 20rpx;
					letter-spacing: 0em;
					color: #999999;
				}
			}

			.numbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 40rpx;

				.numtxt {
					font-size: 28rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #999999;
					
					text{
						color: #45C4B0;
						padding-left: 10rpx;
					}
				}
			}

			.hetxt {
				font-size: 36rpx;
				text-align: right;
				font-weight: bold;
				color: #3D3D3D;

				text {
					font-size: 20rpx;
					letter-spacing: 0em;
					color: #999999;
					padding: 0 5rpx;
				}
			}
		}

		.beibox {
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			margin-bottom: 20rpx;

			.beitxt {
				font-size: 28rpx;
				font-weight: bold;
				color: #3D3D3D;
			}

			.beiput {
				font-size: 28rpx;
				text-align: right;
				letter-spacing: 0em;
				color: #999999;
				width: 500rpx;
				word-break: break-all;
			}
		}

		.xubox {
			padding: 0 30rpx;

			.xutxt {
				font-size: 20rpx;
				line-height: 37rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.dibox {
			z-index: 66;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px -8px 20px 0px rgba(69, 196, 176, 0.2);

			.zaibox {
				width: 630rpx;
				height: 80rpx;
				border-radius: 12px;
				background: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 10rpx;

				.zaileft {
					padding: 0 20rpx;

					.dbox {
						display: flex;
						align-items: center;

						.zaititle {

							font-size: 28rpx;
							font-weight: bold;
							background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;

						}

						.text {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							padding-left: 8rpx;
						}
					}

					.zaitxt {
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0px;
						color: #999999;
					}
				}

				.que {
					width: 190rpx;
					height: 80rpx;
					border-radius: 10px;
					opacity: 1;
					background: #45C4B0;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}

			.xiebox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 10rpx;

				.xietxt {
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;

					text {
						font-size: 20rpx;
						font-weight: bold;
						color: #45C4B0;
						padding: 0 10rpx;
					}
				}
			}
		}

		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;

			.matop {
				padding: 0 30rpx;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.matxt {
					font-size: 36rpx;
					color: #999999;
				}

				.matitle {
					font-size: 36rpx;
					font-weight: bold;
					color: #3D3D3D;
				}

				.mctxt {
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}

			.cabox {
				max-height: 600rpx;
				padding: 20rpx 30rpx;

				.cali {
					margin-bottom: 20rpx;
					width: 650rpx;
					height: 172rpx;
					padding: 0 20rpx;
					border: 1px solid #ffffff;
					background-color: #ffffff;
					border-radius: 10px;
					position: relative;

					.san {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 60rpx;
						height: 60rpx;
						z-index: 10;
					}

					.dui {
						position: absolute;
						right: 2rpx;
						bottom: 2rpx;
						width: 32rpx;
						height: 32rpx;
						z-index: 22;
					}

					.catop {
						display: flex;
						align-items: center;
						padding-bottom: 12rpx;
						padding-top: 22rpx;

						.cpic {
							width: 32rpx;
							height: 32rpx;
							flex-shrink: 0;
						}

						.catitle {
							font-size: 28rpx;
							font-weight: bold;
							color: #3D3D3D;
							padding-left: 8rpx;
						}
					}

					.zhitxt {
						font-size: 20rpx;
						color: #3D3D3D;
						padding-bottom: 6rpx;

						text {
							padding-left: 8rpx;
							font-size: 20rpx;
							color: #999999;
						}
					}

					.jiage {
						font-size: 36rpx;
						font-weight: bold;
						color: #45C4B0;

						text {
							font-weight: 500;
							font-size: 20rpx;
							color: #999999;
							padding-left: 5rpx;
						}
					}
				}

				.active {
					border: 1px solid #45C4B0;
				}
			}

			.toubox {
				max-height: 680rpx;
				padding: 20rpx 30rpx;

				.youbg {
					width: 690rpx;
					height: 238rpx;
					margin-bottom: 20rpx;
					position: relative;

					.youpic {
						width: 100%;
						height: 238rpx;
					}

					.wenben {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 238rpx;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						.youleft {
							width: 608rpx;
							padding-left: 20rpx;
							flex-shrink: 0;

							.yltop {
								display: flex;
								align-items: center;
								height: 68rpx;

								.yline {
									width: 4rpx;
									height: 28rpx;
									border-radius: 84px;
									opacity: 1;
									background: #45C4B0;
								}

								.yltitle {
									font-size: 28rpx;
									font-weight: 500;
									color: #3D3D3D;
									padding-left: 12rpx;
								}
							}

							.mantxt {
								padding: 20rpx 0 10rpx;
								font-size: 48rpx;
								color: #45C4B0;

								text {
									font-size: 48rpx;
									color: #3d3d3d;
								}
							}

							.shaotxt {
								font-size: 28rpx;
								font-weight: 300;
								color: #999999;
							}
						}

						.youtxt {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							width: 60rpx;
							text-align: center;
							line-height: 40rpx;
							letter-spacing: 5rpx;
							padding-top: 60rpx;
						}
					}
				}
			}
		}

		.fubox {
			background-color: #ffffff;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			padding: 40rpx 0 0;
			
			.xietxt {
				text-align: center;
				font-size: 20rpx;
				font-weight: bold;
				color: #999999;
			
				text {
					font-size: 20rpx;
					font-weight: bold;
					color: #45C4B0;
					padding: 0 10rpx;
				}
			}

			.futitle {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				text-align: center;
				color: #3D3D3D;
				padding-bottom: 40rpx;
			}

			.bititle {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				text-align: center;
				color: #3D3D3D;
				padding-bottom: 20rpx;
			}

			.lbai {
				padding: 0 25rpx 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.lpic {
					width: 42rpx;
					height: 42rpx;
				}

				.ltxt {
					flex-grow: 1;
					font-size: 28rpx;
					color: #3D3D3D;
					padding: 0 12rpx;

					text {
						font-size: 20rpx;
						padding-left: 5rpx;
						color: #999999;
					}
				}
			}

			.lizhi {
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 20rpx solid #f2f5f2;

				.quezhi {
					width: 630rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 8px;
					background: #45C4B0;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			.jinbox {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				padding-left: 20rpx;

				.jinli:nth-child(3n) {
					margin-right: 0;
				}

				.jinli {
					width: 220rpx;
					height: 72rpx;
					border-radius: 4px;
					box-sizing: border-box;
					border: 1px solid #D8D8D8;
					margin: 0 16rpx 12rpx 0;
					position: relative;

					.jintop {
						padding-top: 6rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.jintxt {
							font-size: 24rpx;
							font-weight: bold;
							color: #3D3D3D;
							padding-right: 7rpx;
						}

						.jinpic {
							width: 20rpx;
							height: 20rpx;
							border-radius: 0;
						}
					}

					.yuan {
						font-size: 20rpx;
						text-align: center;
						color: #999999;
					}

					.jiao {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 40rpx;
						height: 40rpx;
						z-index: 10;
					}

					.duih {
						position: absolute;
						right: 1rpx;
						bottom: 1rpx;
						width: 24rpx;
						height: 24rpx;
						z-index: 22;
					}
				}

				.jactive {
					border: 1px solid #45C4B0;
				}
			}

			.shubox {
				margin: 10rpx 25rpx 20rpx;
				padding: 0 10rpx;
				height: 72rpx;
				border-radius: 8px;
				// background: #F8F8F8;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.shutitle {
					font-size: 28rpx;
					font-weight: normal;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.shuput {
					padding: 0 10rpx;
					font-size: 24rpx;
					flex: 1;
					text-align: right;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
		}
	}
	
	.clone_date{
		background: #fff;
		width: 100%;
		height: 350rpx;;
	}
	
	.mask2 {
		background-color: #FFFFFF;
		width: 500rpx;
		border-radius: 10px;
		padding: 30rpx;
	
		.jatitle {
			font-size: 28rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
		}
	
		textarea {
			width: 90%;
			padding: 5%;
			font-size: 24rpx;
		}
	
		.japut {
			border-bottom: 1px solid #f2f2f2;
			font-size: 24rpx;
			color: #3D3D3D;
			padding-bottom: 15rpx;
			margin-bottom: 30rpx;
		}
	
		.qubox {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.quli {
				border-radius: 8px;
				border: 1px solid #eeeeee;
				font-size: 24rpx;
				color: #999999;
				width: 220rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
			}
	
			.que {
				border-radius: 8px;
				border: 1px solid #45C4B0;
				background-color: #45C4B0;
				font-size: 24rpx;
				color: #ffffff;
				text-align: center;
				width: 220rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
	
	.pay-item{
		padding: 10px 25px;
		padding-bottom: 15px;
		font-family: 思源黑体;
		font-size: 14px;
		color: #3D3D3D;
		position: relative;
		
		.icon{
			width: 16px;
			height: 16px;
			margin-right: 8px;
		}
		
		.sel{
			position: absolute;
			right: 25px;
			top: 50%;
			transform: translateY(-50%);
			width: 20px;
			height: 20px;
		}
	}
</style>